<script lang="tsx">
import { Button, Modal } from '@arco-design/web-vue'
import { PropType, h } from 'vue'
import * as icons from '@arco-design/web-vue/es/icon'
export default defineComponent({
  props: {
    show: {
      type: Boolean as PropType<boolean>,
      required: true,
    },
  },
  emits: ['confirm', 'update:show', 'cancel'],
  setup(props, { emit }) {
    const handleClick = item => {
      emit('confirm', item.name)
      emit('cancel')
    }
    const render = () => {
      const list: any[] = []
      Object.keys(icons).forEach(key => {
        const item = key != 'default' ? icons[key] : ''
        if (item == '') return
        list.push(
          <a-col span={1} class="mb10">
            <a-button
              class="item"
              onClick={() => handleClick(item)}
              v-slots={{
                icon: () => h(item, { size: 20 }),
              }}
            >
              {/* {key} */}
            </a-button>
          </a-col>
        )
      })
      return list
    }
    return () => (
      <>
        <Modal
          v-model:visible={props.show}
          title="选择图标"
          simple
          width="1000px"
          onCancel={() => emit('update:show', false)}
          v-slots={{
            footer: () => <span></span>,
          }}
        >
          <div class="content">
            <a-row class="mb10">{render()}</a-row>
          </div>
        </Modal>
      </>
    )
  },
})
</script>
<style lang="less" scoped>
.content {
  max-height: 60vh;
  overflow-y: scroll;
}
.item {
  cursor: pointer;
}
</style>
